import { useState, useEffect } from 'react';
import { Card, Statistic, List, Tag, Spin, message } from 'antd';
import { WalletOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import api from '../utils/api';

export default function Balance() {
  const [loading, setLoading] = useState(true);
  const [balance, setBalance] = useState(0);
  const [transactions, setTransactions] = useState([]);
  const user = JSON.parse(localStorage.getItem('user') || '{}');

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const [balanceRes, transRes] = await Promise.all([
        api.get(`/users/${user.id}/balance`),
        api.get(`/transactions/user/${user.id}`, { params: { limit: 5 } })
      ]);
      
      if (balanceRes.success) {
        setBalance(balanceRes.data.balance);
      }
      if (transRes.success) {
        setTransactions(transRes.data.transactions);
      }
    } catch (error) {
      message.error('加载失败');
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div style={{ textAlign: 'center', padding: '100px 0' }}>
        <Spin size="large" />
      </div>
    );
  }

  return (
    <div style={{ padding: 20 }}>
      <Card
        style={{
          background: 'linear-gradient(135deg, #d4af37 0%, #f4e5a1 50%, #d4af37 100%)',
          border: 'none',
          borderRadius: 16,
          marginBottom: 20,
          boxShadow: '0 8px 24px rgba(212, 175, 55, 0.3)'
        }}
        bodyStyle={{ padding: 32 }}
      >
        <Statistic
          title={<span style={{ color: '#1a1a1a', fontSize: 16 }}>账户余额</span>}
          value={balance}
          precision={2}
          prefix="¥"
          valueStyle={{
            color: '#1a1a1a',
            fontSize: 48,
            fontWeight: 'bold',
            textShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
          }}
        />
      </Card>

      <Card
        title={
          <span style={{ color: '#d4af37' }}>
            <WalletOutlined /> 最近交易
          </span>
        }
        style={{
          background: 'rgba(0, 0, 0, 0.7)',
          backdropFilter: 'blur(10px)',
          border: '1px solid rgba(212, 175, 55, 0.2)',
          borderRadius: 16
        }}
        headStyle={{
          borderBottom: '1px solid rgba(212, 175, 55, 0.2)',
          color: '#d4af37'
        }}
        bodyStyle={{ padding: 0 }}
      >
        <List
          dataSource={transactions}
          renderItem={(item) => (
            <List.Item
              style={{
                padding: '16px 24px',
                borderBottom: '1px solid rgba(212, 175, 55, 0.1)'
              }}
            >
              <List.Item.Meta
                avatar={
                  item.type === 'recharge' ? (
                    <ArrowDownOutlined style={{ fontSize: 24, color: '#52c41a' }} />
                  ) : (
                    <ArrowUpOutlined style={{ fontSize: 24, color: '#ff4d4f' }} />
                  )
                }
                title={
                  <div style={{ color: '#fff', fontSize: 16 }}>
                    {item.type === 'recharge' ? '充值' : '消费'}
                  </div>
                }
                description={
                  <span style={{ color: 'rgba(255, 255, 255, 0.5)' }}>
                    {dayjs(item.created_at).format('YYYY-MM-DD HH:mm')}
                  </span>
                }
              />
              <div style={{ textAlign: 'right' }}>
                <div style={{
                  fontSize: 20,
                  fontWeight: 'bold',
                  color: item.type === 'recharge' ? '#52c41a' : '#ff4d4f'
                }}>
                  {item.type === 'recharge' ? '+' : '-'}¥{item.amount}
                </div>
                <Tag color={item.type === 'recharge' ? 'success' : 'error'}>
                  {item.type === 'recharge' ? '收入' : '支出'}
                </Tag>
              </div>
            </List.Item>
          )}
        />
      </Card>
    </div>
  );
}
